<template>
  <div>
    <div class="table_card">
      <div class="table_card_top">
        <span class="pl_left"></span>
        <div class="rules_title">统一封账时间</div>
      </div>
      <div class="Parameter_form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="统一封账时间" prop="closeOrderTime">
                <el-date-picker
                  v-model="ruleForm.closeOrderTime"
                  type="datetime"
                  placeholder="请选择统一封账时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录方式" prop="loginType">
                <el-select
                  class="w-200"
                  v-model="ruleForm.loginType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in loginTypeArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="el_btn_bottom">
          <el-button type="primary" @click="SaveCloseOrder">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCloseOrder, CreateCloseOrder } from "@/api/business/parameter";
export default {
  name: "EryuoaStoreProjectCommission",

  data() {
    return {
      ruleForm: {
        closeOrderTime: null,
        loginType: "",
      },
      rules: {
        // closeOrderTime: [
        //   { required: true, message: "请选择统一封账时间", trigger: "blur" },
        // ],
      },
      total: 0,
      ProjectCom: [],
      loginTypeArr: [
        {
          value: "p",
          label: "密码",
        },
        {
          value: "S",
          label: "验证码",
        },
      ],
    };
  },

  created() {
    this.getCloseOrderList();
  },

  mounted() {},

  methods: {
    // 保存提成规则
    SaveCloseOrder() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.CreateCloseOrderAct();
        }
      });
    },

    resQ() {
      this.getCloseOrderList();
    },

    // 查询项目提成配置
    getCloseOrderList() {
      this.loading = true;
      getCloseOrder({})
        .then((res) => {
          console.log(res, "查询项目提成配置");
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ruleForm.closeOrderTime = data.closeOrderTime;
            this.ruleForm.loginType = data.loginType;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    CreateCloseOrderAct() {
      this.loading = true;
      CreateCloseOrder(this.ruleForm)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            // this.ProjectCom = data.list;
            this.getCloseOrderList();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    SethandleClose() {
      this.resetFormData("ruleForm");
      this.$nextTick(() => {
        this.SetdialogVisible = false;
      });
    },

    // 表单重置
    resetFormData(formName) {
      // console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.pl_left {
  padding-left: 24px;
}
.rules_title {
  font-weight: bolder;
  font-size: 18px;
}
.Parameter_form {
  padding-left: 20px;
  position: relative;
  padding-bottom: 100px;
}
.ipt_iner {
  margin-top: 10px;
  .ipt_number {
    position: relative;
    .percent {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #333;
      font-size: 15px;
    }
  }
  .yuan {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #333;
    font-size: 15px;
  }
}
.el_btn_bottom {
  position: absolute;
  left: 800px;
  bottom: 20px;
}
</style>
